<template>
	<view class="container">
		<!-- 视频播放器 -->
		<view class="video-player">
			<video :src="lesson.videoUrl" :poster="lesson.poster" :controls="true" :autoplay="false"
				@timeupdate="onTimeUpdate" class="video"></video>
		</view>

		<!-- 课程信息 -->
		<view class="lesson-info">
			<text class="lesson-title">{{ lesson.title }}</text>
			<view class="lesson-meta">
				<text class="chapter">{{ lesson.chapter }}</text>
				<text class="duration">{{ lesson.duration }}</text>
				<text class="progress">已学习 {{ progress }}%</text>
			</view>
		</view>

		<!-- 功能导航 -->
		<view class="function-nav">
			<view class="nav-item" :class="{ active: currentTab === 'note' }" @click="switchTab('note')">
				<uni-icons type="compose" size="24" :color="currentTab === 'note' ? '#4b7bec' : '#636e72'"></uni-icons>
				<text>笔记</text>
			</view>
			<view class="nav-item" :class="{ active: currentTab === 'qa' }" @click="switchTab('qa')">
				<uni-icons type="chat" size="24" :color="currentTab === 'qa' ? '#4b7bec' : '#636e72'"></uni-icons>
				<text>问答</text>
			</view>
			<view class="nav-item" :class="{ active: currentTab === 'material' }" @click="switchTab('material')">
				<uni-icons type="download" size="24" :color="currentTab === 'material' ? '#4b7bec' : '#636e72'">
				</uni-icons>
				<text>资料</text>
			</view>
		</view>

		<!-- 笔记区域 -->
		<view class="note-section" v-if="currentTab === 'note'">
			<view class="note-header">
				<text class="title">课程笔记</text>
				<view class="add-btn" @click="showNoteEditor">
					<uni-icons type="plus" size="20" color="#4b7bec"></uni-icons>
					<text>添加笔记</text>
				</view>
			</view>
			<view class="note-list">
				<view class="note-item" v-for="note in notes" :key="note.id">
					<view class="note-time">
						<text class="video-time">{{ formatTime(note.videoTime) }}</text>
						<text class="create-time">{{ note.createTime }}</text>
					</view>
					<text class="note-content">{{ note.content }}</text>
					<view class="note-actions">
						<view class="action-btn" @click="editNote(note)">
							<uni-icons type="compose" size="16" color="#636e72"></uni-icons>
							<text>编辑</text>
						</view>
						<view class="action-btn" @click="deleteNote(note)">
							<uni-icons type="trash" size="16" color="#636e72"></uni-icons>
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 问答区域 -->
		<view class="qa-section" v-if="currentTab === 'qa'">
			<view class="qa-header">
				<text class="title">课程问答</text>
				<view class="add-btn" @click="showQuestionEditor">
					<uni-icons type="plus" size="20" color="#4b7bec"></uni-icons>
					<text>提问</text>
				</view>
			</view>
			<view class="qa-list">
				<view class="qa-item" v-for="qa in questions" :key="qa.id">
					<view class="user-info">
						<image :src="qa.userAvatar" mode="aspectFill" class="user-avatar"></image>
						<text class="username">{{ qa.username }}</text>
						<text class="ask-time">{{ qa.time }}</text>
					</view>
					<view class="question-content">
						<text class="video-time">{{ formatTime(qa.videoTime) }}</text>
						<text class="question-text">{{ qa.content }}</text>
					</view>
					<view class="answer" v-if="qa.answer">
						<view class="teacher-info">
							<image :src="qa.teacherAvatar" mode="aspectFill" class="teacher-avatar"></image>
							<text class="teacher-name">{{ qa.teacherName }}</text>
							<text class="answer-time">{{ qa.answerTime }}</text>
						</view>
						<text class="answer-content">{{ qa.answer }}</text>
					</view>
					<view class="qa-actions">
						<view class="action-btn" @click="likeQuestion(qa)">
							<uni-icons :type="qa.liked ? 'heart-filled' : 'heart'" size="16"
								:color="qa.liked ? '#ff6b6b' : '#636e72'"></uni-icons>
							<text>{{ qa.likes }}</text>
						</view>
						<view class="action-btn" @click="replyQuestion(qa)">
							<uni-icons type="chat" size="16" color="#636e72"></uni-icons>
							<text>回复</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 课程资料 -->
		<view class="material-section" v-if="currentTab === 'material'">
			<view class="material-list">
				<view class="material-item" v-for="material in materials" :key="material.id"
					@click="viewMaterial(material)">
					<view class="material-icon">
						<uni-icons :type="material.icon" size="32" color="#4b7bec"></uni-icons>
					</view>
					<view class="material-info">
						<text class="material-name">{{ material.name }}</text>
						<text class="material-size">{{ material.size }}</text>
					</view>
					<view class="download-btn">
						<uni-icons type="download" size="20" color="#4b7bec"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 笔记编辑弹窗 -->
		<uni-popup ref="notePopup" type="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">添加笔记</text>
					<view class="close-btn" @click="hideNoteEditor">
						<uni-icons type="close" size="20"></uni-icons>
					</view>
				</view>
				<view class="form-item">
					<text class="video-time">视频时间：{{ formatTime(currentTime) }}</text>
					<textarea v-model="newNote" placeholder="请输入笔记内容" class="note-textarea"></textarea>
				</view>
				<button class="submit-btn" @click="submitNote">保存笔记</button>
			</view>
		</uni-popup>

		<!-- 问题编辑弹窗 -->
		<uni-popup ref="questionPopup" type="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">提问</text>
					<view class="close-btn" @click="hideQuestionEditor">
						<uni-icons type="close" size="20"></uni-icons>
					</view>
				</view>
				<view class="form-item">
					<text class="video-time">视频时间：{{ formatTime(currentTime) }}</text>
					<textarea v-model="newQuestion" placeholder="请输入问题内容" class="question-textarea"></textarea>
				</view>
				<button class="submit-btn" @click="submitQuestion">提交问题</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'note',
				currentTime: 0,
				progress: 0,
				newNote: '',
				newQuestion: '',
				lesson: {
					id: 1,
					title: '1.1 人体解剖学概述',
					chapter: '第一章 绪论',
					duration: '45分钟',
					videoUrl: 'https://example.com/video.mp4',
					poster: '/static/images/video-poster.jpg'
				},
				notes: [{
						id: 1,
						videoTime: 120,
						content: '人体解剖学是研究人体正常形态结构的科学，是医学的重要基础学科之一。',
						createTime: '2024-03-15 14:30'
					},
					{
						id: 2,
						videoTime: 300,
						content: '解剖学的研究方法包括：系统解剖学、局部解剖学、比较解剖学等。',
						createTime: '2024-03-15 14:35'
					}
				],
				questions: [{
						id: 1,
						userAvatar: '/static/images/avatar1.jpg',
						username: '医学生小王',
						time: '2024-03-15 14:30',
						videoTime: 180,
						content: '请问老师，解剖学中的"位置术语"具体指什么？',
						teacherAvatar: '/static/images/teacher1.jpg',
						teacherName: '张教授',
						answerTime: '2024-03-15 15:00',
						answer: '位置术语是描述人体各部位相对位置关系的专业术语，包括：上下、前后、内外、浅深等。这些术语是学习解剖学的基础。',
						likes: 12,
						liked: false
					},
					{
						id: 2,
						userAvatar: '/static/images/avatar2.jpg',
						username: '实习医生小李',
						time: '2024-03-15 14:40',
						videoTime: 240,
						content: '老师，能详细解释一下解剖学平面的概念吗？',
						likes: 8,
						liked: true
					}
				],
				materials: [{
						id: 1,
						name: '第一章讲义.pdf',
						size: '2.5MB',
						icon: 'file-pdf'
					},
					{
						id: 2,
						name: '解剖学图谱.zip',
						size: '15MB',
						icon: 'folder'
					}
				]
			}
		},
		methods: {
			onTimeUpdate(e) {
				this.currentTime = e.detail.currentTime;
				this.progress = Math.floor((e.detail.currentTime / e.detail.duration) * 100);
			},
			switchTab(tab) {
				this.currentTab = tab;
			},
			formatTime(seconds) {
				const minutes = Math.floor(seconds / 60);
				const remainingSeconds = Math.floor(seconds % 60);
				return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
			},
			showNoteEditor() {
				this.$refs.notePopup.open();
			},
			hideNoteEditor() {
				this.$refs.notePopup.close();
				this.newNote = '';
			},
			submitNote() {
				if (!this.newNote.trim()) {
					uni.showToast({
						title: '请输入笔记内容',
						icon: 'none'
					});
					return;
				}

				const note = {
					id: Date.now(),
					videoTime: this.currentTime,
					content: this.newNote,
					createTime: new Date().toLocaleString()
				};

				this.notes.push(note);
				this.hideNoteEditor();

				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
			},
			editNote(note) {
				this.newNote = note.content;
				this.showNoteEditor();
			},
			deleteNote(note) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条笔记吗？',
					success: (res) => {
						if (res.confirm) {
							this.notes = this.notes.filter(n => n.id !== note.id);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			showQuestionEditor() {
				this.$refs.questionPopup.open();
			},
			hideQuestionEditor() {
				this.$refs.questionPopup.close();
				this.newQuestion = '';
			},
			submitQuestion() {
				if (!this.newQuestion.trim()) {
					uni.showToast({
						title: '请输入问题内容',
						icon: 'none'
					});
					return;
				}

				const question = {
					id: Date.now(),
					userAvatar: '/static/images/avatar1.jpg',
					username: '我',
					time: new Date().toLocaleString(),
					videoTime: this.currentTime,
					content: this.newQuestion,
					likes: 0,
					liked: false
				};

				this.questions.unshift(question);
				this.hideQuestionEditor();

				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
			},
			likeQuestion(qa) {
				qa.liked = !qa.liked;
				qa.likes += qa.liked ? 1 : -1;
			},
			replyQuestion(qa) {
				uni.navigateTo({
					url: `/pages/study/qa-reply?questionId=${qa.id}`
				})
			},
			viewMaterial(material) {
				uni.navigateTo({
					url: `/pages/study/material-detail?id=${material.id}`
				})
			},
			downloadMaterial(material) {
				uni.showLoading({
					title: '下载中...'
				});

				// 模拟下载过程
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '下载成功',
						icon: 'success'
					});
				}, 2000);
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f8f9fc;
		min-height: 100vh;
	}

	.video-player {
		width: 100%;
		height: 422rpx;
		background-color: #000;

		.video {
			width: 100%;
			height: 100%;
		}
	}

	.lesson-info {
		background-color: #fff;
		padding: 30rpx;

		.lesson-title {
			font-size: 32rpx;
			color: #2d3436;
			font-weight: bold;
			margin-bottom: 16rpx;
			display: block;
		}

		.lesson-meta {
			display: flex;
			font-size: 24rpx;
			color: #636e72;

			text {
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.function-nav {
		display: flex;
		background-color: #fff;
		padding: 20rpx 0;
		margin-top: 20rpx;

		.nav-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #636e72;

			&.active {
				color: #4b7bec;
			}

			text {
				margin-top: 8rpx;
			}
		}
	}

	.note-section,
	.qa-section,
	.material-section {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx;

		.note-header,
		.qa-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.title {
				font-size: 32rpx;
				color: #2d3436;
				font-weight: bold;
			}

			.add-btn {
				display: flex;
				align-items: center;
				color: #4b7bec;
				font-size: 28rpx;

				text {
					margin-left: 8rpx;
				}
			}
		}
	}

	.note-list {
		.note-item {
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #eee;

			.note-time {
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;

				text {
					font-size: 24rpx;
					color: #636e72;
				}
			}

			.note-content {
				font-size: 28rpx;
				color: #2d3436;
				line-height: 1.6;
				margin-bottom: 16rpx;
			}

			.note-actions {
				display: flex;

				.action-btn {
					display: flex;
					align-items: center;
					margin-right: 30rpx;
					font-size: 24rpx;
					color: #636e72;

					text {
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.qa-list {
		.qa-item {
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #eee;

			.user-info,
			.teacher-info {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.user-avatar,
				.teacher-avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					margin-right: 16rpx;
				}

				.username,
				.teacher-name {
					font-size: 28rpx;
					color: #2d3436;
					margin-right: 16rpx;
				}

				.ask-time,
				.answer-time {
					font-size: 24rpx;
					color: #636e72;
				}
			}

			.question-content {
				background-color: #f8f9fc;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.video-time {
					font-size: 24rpx;
					color: #636e72;
					margin-bottom: 8rpx;
					display: block;
				}

				.question-text {
					font-size: 28rpx;
					color: #2d3436;
					line-height: 1.6;
				}
			}

			.answer {
				background-color: #f8f9fc;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.answer-content {
					font-size: 28rpx;
					color: #2d3436;
					line-height: 1.6;
				}
			}

			.qa-actions {
				display: flex;

				.action-btn {
					display: flex;
					align-items: center;
					margin-right: 30rpx;
					font-size: 24rpx;
					color: #636e72;

					text {
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.material-list {
		.material-item {
			display: flex;
			align-items: center;
			background-color: #f8f9fc;
			padding: 20rpx;
			border-radius: 12rpx;
			margin-bottom: 20rpx;

			.material-icon {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(75, 123, 236, 0.1);
				border-radius: 12rpx;
				margin-right: 20rpx;
			}

			.material-info {
				flex: 1;

				.material-name {
					font-size: 28rpx;
					color: #2d3436;
					margin-bottom: 8rpx;
					display: block;
				}

				.material-size {
					font-size: 24rpx;
					color: #636e72;
				}
			}

			.download-btn {
				padding: 20rpx;
			}
		}
	}

	.popup-content {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 30rpx;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #2d3436;
			}

			.close-btn {
				padding: 10rpx;
			}
		}

		.form-item {
			margin-bottom: 30rpx;

			.video-time {
				font-size: 24rpx;
				color: #636e72;
				margin-bottom: 16rpx;
				display: block;
			}

			.note-textarea,
			.question-textarea {
				width: 100%;
				height: 300rpx;
				border: 1px solid #dfe6e9;
				border-radius: 12rpx;
				padding: 20rpx;
				font-size: 28rpx;
			}
		}

		.submit-btn {
			background-color: #4b7bec;
			color: #fff;
			font-size: 32rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
		}
	}
</style> 